import React from "react";
import { Modal, Button } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import "./CustomConfirmModal.scss";

interface CustomConfirmModalProps {
  visible: boolean;
  title: string;
  content: React.ReactNode;
  onOk: () => void;
  onCancel: () => void;
  okText?: string;
  cancelText?: string;
  okType?: "primary" | "danger";
  width?: number;
  icon?: React.ReactNode;
}

const CustomConfirmModal: React.FC<CustomConfirmModalProps> = ({
  visible,
  title,
  content,
  onOk,
  onCancel,
  okText = "确定",
  cancelText = "取消",
  okType = "primary",
  width = 416,
  icon = <ExclamationCircleOutlined style={{ color: "#faad14" }} />,
}) => {
  return (
    <Modal
      open={visible}
      title={null}
      footer={null}
      onCancel={onCancel}
      width={width}
      className="custom-confirm-modal"
      maskClosable={false}
    >
      <div className="confirm-content">
        <div className="confirm-header">
          {icon && <div className="confirm-icon">{icon}</div>}
          <div className="confirm-title">{title}</div>
        </div>
        <div className="confirm-body">{content}</div>
        <div className="confirm-footer">
          <Button onClick={onCancel}>{cancelText}</Button>
          <Button type={okType} onClick={onOk} style={{ marginLeft: 8 }}>
            {okText}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default CustomConfirmModal;
